<template>
  <div style="width: 100%">
    <el-form ref="formRef" label-width="130px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="span">
          <el-form-item label="appid">
            <el-input v-model.trim="form.appid" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="span">
          <el-form-item label="appsign">
            <el-input v-model.trim="form.appsign" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="float: right" :style="'margin-right:' + width">
      <el-button v-if="form.id" type="danger" @click="reset">重置</el-button>
      <el-button v-else type="primary" @click="create">生成</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { api, api_save } from '/@/api/obj'
const $baseConfirm = inject<any>('$baseConfirm')

defineOptions({
  name: 'BasicSetupEdit',
})

const props = defineProps({
  width: {
    type: String,
    default: '518px',
  },
  span: {
    type: Number,
    default: 8,
  },
  rules: {
    type: Object,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {},
  },
  loading: {
    type: Object,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {},
  },
})

const emit = defineEmits(['fetch-data'])
const $baseMessage = inject<any>('$baseMessage')
const formRef = ref<any>(null)
const title = ref<string>('')
const dialogFormVisible = ref<boolean>(false)
let tablename = ''
const cols = reactive<any>([]) //所有列
const edit_show = reactive<any>([]) //编辑列
const form = reactive<any>({})
const foreign_list = reactive<any>([])
const selection_list = reactive<any>([])
const status_list = reactive<any>([])
const img_list = reactive<any>([]) //特殊字段是图片的列

//自定义提交
// const rules = reactive<any>({
//   name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
//   // username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
// })

const create = () => {
  $baseConfirm('您确定要生成吗', null, async () => {
    const { msg }: any = await api(tablename, 'create', 'post', { create: 'yes' })
    $baseMessage(msg, 'success', 'hey')
    await $baseMessage(msg, 'success', 'hey')
    await close()
    dialogFormVisible.value = false
    // await getData()
    // emit('getData')
  })
}
const reset = () => {
  $baseConfirm('您确定要重置吗', null, async () => {
    const { msg }: any = await api(tablename, 'reset', 'post', { id: form.id })
    $baseMessage(msg, 'success', 'hey')
    await $baseMessage(msg, 'success', 'hey')
    await close()
    dialogFormVisible.value = false
    // await getData()
    // emit('getData')
  })
}

//自定义保存数据
const save = () => {
  console.log('save', form)
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      const { msg }: any = await api_save(tablename, form)
      await $baseMessage(msg, 'success', 'hey')
      await close()
      dialogFormVisible.value = false
    }
  })
}
//通用显示弹窗
const showEdit = (res: any) => {
  console.log('showEdit', res)
  //外键
  Object.assign(foreign_list, res.foreign_list)
  Object.assign(selection_list, res.selection_list)
  if (res.config_table) {
    //编辑：外键
    tablename = res.config_table.tablename
    Object.assign(status_list, res.config_table.status_list)
    Object.assign(cols, res.config_table.cols)
    Object.assign(edit_show, res.config_table.edit_show)
    Object.assign(img_list, res.config_table.field_img)
  } else {
    //添加：外键
    tablename = res.tablename
    Object.assign(status_list, res.status_list)
    Object.assign(cols, res.cols)
    Object.assign(edit_show, res.edit_show)
    Object.assign(img_list, res.field_img)
  }

  dialogFormVisible.value = true
  props.loading.close()
  nextTick(() => {
    if (!res.detail) {
      title.value = '添加'
      Object.assign(form, {
        id: null,
      })
    } else {
      title.value = '编辑'
      //如果该表有状态，则需要讲状态转化为int类型
      if (res.detail.status) {
        res.detail.status = parseInt(res.detail.status)
      }
      Object.assign(form, res.detail)
    }
  })
}
defineExpose({
  showEdit,
})
//通用关闭弹窗
const close = () => {
  formRef.value.clearValidate()
  formRef.value.resetFields()
  dialogFormVisible.value = false
  emit('fetch-data')
}
</script>

<style lang="scss" scoped>
.el-col {
  margin: 5px 0;
}

.wang-editor-container {
  padding: 0 !important;
  // margin: -19px -19px 19px -19px;
  overflow: hidden !important;
  background: var(--el-background-color) !important;
  border: 0 !important;

  &.w-e-full-screen-container {
    z-index: 9999 !important;
  }

  .w-e-bar-divider {
    display: none;
  }

  .w-e-toolbar-init {
    border-bottom: 1px solid var(--el-border-color) !important;
  }

  .wang-editor-content {
    width: 70%;
    min-height: calc(var(--el-container-height) - 110px) !important;
    margin: 20px auto 20px auto;
    background-color: var(--el-color-white);
    border: 0;
  }

  #w-e-textarea-1 {
    margin: var(--el-margin) !important;
  }

  .wang-editor-footer {
    width: 70%;
    margin: auto;
  }

  @media (max-width: 768px) {
    .wang-editor-title,
    .wang-editor-content,
    .wang-editor-footer {
      width: 90%;
    }
  }
}

.wang-editor-dialog {
  img {
    max-width: 100%;
  }
}
</style>
